<template>
  <div class="classify clear">
    <div class="list-left">
      <div v-for="(item, index) in lists" :key="index" class="item" :class="(is_check == item.id) ?'active' : ''" @click="checkFn(item.id)">{{item.title}}</div>
<!--       <div class="item" :class="(is_check == '2') ?'active' : ''" @click="checkFn(2)">学霸学吧</div>
      <div class="item" :class="(is_check == '3') ?'active' : ''" @click="checkFn(3)">社交达人</div> -->
    </div>
    <div class="cons-right">
      <span class="img"><img :src="img" alt=""></span>
      <p class="title">全部类别</p>
      <div class="classify-list">
        <span v-for='(item, index) in check_list' :key="index" @click="router({path: './courseList', query: {tcate: item.id}})">{{item.title}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {classify} from '@/api/api'
  export default {
    components: {
    },
    data () {
      return {
        is_check: 0,
        lists:[],
        check_list:[],
        img:''
      }
    },
    created () {
      this.classif(),
      this.is_check = this.$route.query.columId
    },
    methods: {
      checkFn (index) {
        this.is_check = index
        for(var i in this.lists){
          if(this.lists[i].id == this.is_check){
            this.check_list = this.lists[i]._child
            this.img = this.lists[i].img
          }
        }
      },
      router (path) {
        this.$router.push(path)
      },
      classif(){
        classify().then((res) =>{
          console.log(res)
          this.lists=res.data.data.list
          if(!this.is_check){
            this.is_check=this.lists[0].id
          }
          for(var i in this.lists){
            if(this.lists[i].id == this.is_check){
              this.check_list = this.lists[i]._child
              this.img = this.lists[i].img
            }
          }          
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.classify
  width 100%
  height 100vh
  overflow hidden
  background-color #fff
  .list-left
    background-color #f8f8f8
    height 100%
    width 8.5rem
    float left
    .item.active
      color #172F6D
      background-color #fff
    .item
      color #666666
      font-size 1.5rem
      line-height 6rem
      text-align center
  .cons-right
    background-color #fff
    width calc(100% - 8.5rem)
    height 100%
    float left
    padding 2.3rem 1rem
    box-sizing border-box
    .img
      display flex
      height 7.5rem
      img
        object-fit cover
    .title
      font-size 1.5rem
      color #000
      font-weight 500
      line-height 1.5rem
      height 1.5rem
      margin-top 2.5rem
      margin-bottom 1.5rem
      overflow hidden
    .classify-list
      span
        float left
        width calc(33.3% - .7rem)
        text-align center
        height 3.2rem
        line-height 3.2rem
        border 1px solid #ccc
        color #333
        font-size 1.2rem
        box-sizing border-box        
        font-weight 500
        margin-bottom 1rem
        &:nth-child(3n+2)
          margin 0 1.05rem
</style>
